<template>
  <div>
    <el-dialog :title="this.$parent.tabtitle" :visible.sync="addFormVisible" width="30%">
      <el-form label-width="110px" label-position="left">
        <el-form-item label="展示图">
          <audioPicUpload ref="audiopicupload" v-model="topContent" v-if="topContentShow"></audioPicUpload>
        </el-form-item>
        <el-form-item label="栏目名称">
          <el-input v-model="columnValue.name" style="width:300px" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="columnValue.sort" style="width:300px" placeholder="数值越小越靠前"></el-input>
        </el-form-item>
        <el-form-item label="所属模块">
          <el-select v-model="columnValue.module" placeholder="请选择">
            <el-option label="首页" value="home"></el-option>
            <el-option label="支部宣传" value="branch_propaganda"></el-option>
            <el-option label="向党学习" value="party_study"></el-option>
            <el-option label="新闻资讯" value="news"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容类型">
          <el-select v-model="columnValue.type" placeholder="请选择">
            <el-option label="文章" value="article"></el-option>
            <el-option label="视频" value="video"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addClassify">确认</el-button>
          <el-button @click.native="addFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
  import audioPicUpload from '@/components/audioPicUpload'
    export default {
      components: {audioPicUpload},
      name: "columndialog",
      data(){
        return{
          addFormVisible : true,
          columnValue : {},
          topContentShow:true,
          topContent:{},
        }
      },
      mounted(){
        this.addFormVisible = false;
      },
      methods:{
        //提交添加/修改
        addClassify(){
          this.$parent.addClassify();
        }
      },
      watch: {
        'addFormVisible': function (newVal) {
          if (newVal == false){
            if (this.columnValue.img_url){
              this.$refs.audiopicupload.addForm.src = '';
              this.$refs.audiopicupload.addForm.type = '';
            }
            this.columnValue = {}
          }else {
            if (this.columnValue.img_url){
              this.$refs.audiopicupload.addForm.src = this.columnValue.img_url;
              this.$refs.audiopicupload.addForm.type = 'img';
            }
          }
        },
        'topContent' : function (newVal) {
          if (newVal.type == 'img'){
            this.columnValue.img_id = newVal.srcId;
          } else {
            this.columnValue.img_id = newVal.video_post_id;
          }

        }
      }
    }
</script>

<style scoped>

</style>
